import React, { Component } from "react";
import "./category.scss";
import SearchInput from "../SearchInput/SearchInput";
import { NavBar } from "antd-mobile";
import myaxios from "../../utils/myaxios";

export default class index extends Component {
  state = {
    categories: [], //分类菜单数据
    categories_content: [], //右边菜单渲染的内容
    select_index: 0, //当前选中左边的菜单栏索引
  };
  //左边以及菜单点击事件
  handleItemClick = (e) => {
    //   获取点击一级菜单下的索引
    let select_index = e.target.getAttribute("data-index");
    this.setState({
      select_index: parseInt(select_index),
      //右边内容
      categories_content: this.state.categories[select_index].children,
    });
  };
  //右边产品图片点击事件
  handleProductImgClick = (e) => {
    let cp_id = e.target.getAttribute("data-index");
    this.props.history.push("/goodList/" + cp_id);
  };

  componentDidMount() {
    myaxios
      .get("categories")
      .then((res) => {
        console.log(res[0].children);
        this.setState({
          categories: res,
          categories_content: res[0].children,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }

  render() {
    return (
      <div className="yg-category">
        {/* 分类导航开始 */}
        <div className="yg-category-nav">
          <NavBar className="category-nav">商品分类</NavBar>
        </div>
        {/* 分类导航结束 */}
        {/* 分类搜索框开始 */}
        {/* <div className="yg-category-search">
          <SearchInput></SearchInput>
        </div> */}
        {/* 分类搜索框结束 */}
        {/* 分类菜单开始 */}
        <div className="yg-category-content">
          {/* 左边分类菜单开始 */}
          {/* 利用事件冒泡原理(事件委托)，处理一级菜单下的点击事件 */}
          <div className="content-left" onClick={this.handleItemClick}>
            {this.state.categories.map((v, i) => {
              return (
                <div
                  key={v.cat_id}
                  data-index={i}
                  className={
                    this.state.select_index === i
                      ? "active content-left-item"
                      : "content-left-item"
                  }
                >
                  {v.cat_name}
                </div>
              );
            })}
          </div>
          {/* 左边分类菜单结束 */}
          {/* 右边分类菜单开始 */}
          <div className="content-right">
            {this.state.categories_content.map((v, i) => {
              return (
                <div className="content-right-item" key={v.cat_id}>
                  <div className="right-item-title">/{v.cat_name}/</div>
                  <div
                    className="product-list"
                    onClick={this.handleProductImgClick}
                  >
                    {
                      //防止二次渲染，添加阀门
                      v.children &&
                        v.children.map((v1, i1) => {
                          return (
                            <div className="product-list-item" key={v1.cat_id}>
                              <div className="imagerWrapper">
                                <img src={v1.cat_icon} data-index={v1.cat_id} />
                              </div>
                              <div className="item-title">{v1.cat_name}</div>
                            </div>
                          );
                        })
                    }
                  </div>
                </div>
              );
            })}
          </div>
          {/* 右边分类菜单结束 */}
        </div>
        {/* 分类菜单结束*/}
      </div>
    );
  }
}